<!-- 页面 -->
<template>
  <div class="login">
<div class="a">
 <img src="..\src\assets\1.png" alt="">
    <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" class="v" >
  <el-form-item label="用户名" prop="username">
    <el-input type="text" v-model="ruleForm.username" ></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password" ></el-input>
   </el-form-item> 
  <el-form-item>
    <el-button type="primary" @click="login()">登录</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</div>
</div>
</template>
<!--vue -->
<script>
export default {
data() {
return {
//声明的属性
ruleForm:{
    username:"",
    password:"",
},
rules:{
  username:[
      {required:true,message:'请输入用户名',trigger:'blur'},
      {min:3,max:6,message:'请输入3-6位字符',trigger:'blur'}
  ],
  password:[
      {required:true,message:'请输入密码',trigger:'blur'},
      {min:3,max:6,message:'请输入3-6位数字',trigger:'blur'}
  ],
}
 
}
},
//生命周期函数
mounted() {
},
//调用方法
methods: {
    login(){
        this.$refs.ruleForm.validate(async valid=>{
            if(valid){
             const{data}=await this.axios.post('/login',this.ruleForm)
             if(data.meta.status===200){
                sessionStorage.token=data.data.token
                this.$router.push('/home')
                this.$message.success(data.meta.msg)
             }else{
                 this.$message.error(data.meta.msg)
             }
            }else{
                console.log('效验不符合')
            }
        })
    }
},
//监听器
watch: {},
// 计算属性
computed: {},
//过滤器
filters: {},
//自定义指令
directives: {},
}
</script>
<!-- css样式 -->
<style scope>
*{
  padding: 0;
  margin: 0;
}
.login{
  width: 100vw;
    height: 100vh;
   background-color: #2c4b6b;

}
.a{
   width: 800px;
    height: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 14px;
    background-color: white;
    box-shadow: 0 0 20px white;
    position: relative;
}
img{
   width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    top: 8%;
    left: 50%;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 80px;
    font-size: 80px;
    border: 1px solid wheat;
}
.v{
  padding-top: 80px;
}
</style>